<template>
  <div class="swiper-container">
    <div :class="classes.wrapperClass">
      <slot></slot>
    </div>
    <slot name="pagination"></slot>
    <slot name="button-prev"></slot>
    <slot name="button-next"></slot>
    <slot name="scrollbar"></slot>
    <div class="swiper-pagination"></div>
    <!-- <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>-->
  </div>
</template>

<script>
import { Vue, Component } from "vue-property-decorator";
import Swiper from "swiper";
@Component({
  props: {
    options: Object
  }
})
export default class swiper extends Vue {
  swiper = null;
  classes = { wrapperClass: "swiper-wrapper" };
  ready() {
    if (!this.swiper) {
      this.mountInstance();
    }
  }
  mounted() {
    if (!this.swiper) {
      let setClassName = false;
      for (const className in this.classes) {
        if (this.classes.hasOwnProperty(className)) {
          if (this.options[className]) {
            setClassName = true;
            this.classes[className] = this.options[className];
          }
        }
      }
      setClassName ? this.$nextTick(this.mountInstance) : this.mountInstance();
    }
  }
  updated() {
    this.update();
  }
  beforeDestroy() {
    this.$nextTick(function() {
      if (this.swiper) {
        this.swiper.destroy && this.swiper.destroy();
        delete this.swiper;
      }
    });
  }
  update() {
    if (this.swiper) {
      this.swiper.update && this.swiper.update();
      this.swiper.navigation && this.swiper.navigation.update();
      this.swiper.pagination && this.swiper.pagination.render();
      this.swiper.pagination && this.swiper.pagination.update();
    }
  }
  mountInstance() {
    this.swiper = new Swiper(this.$el, this.options);
    this.$emit("ready", this.swiper);
  }
}
</script>
<style>
@import "../../node_modules/swiper/css/swiper.min.css";
</style>